<template>
	<div>

		<div class="mb-8">
			Excel {{ $t('public.template')}}
			<el-button type="primary" size="small" class="ml-10" @click="download">
				<template #default>
					<span class="text-sm">{{ $t('public.download')}} Excel {{ $t('public.template')}}</span>
				</template>
			</el-button>
		</div>

		<div class="mb-8 w-full">
			{{ $t('public.upload')}} Excel
			<Upload :list="{ 'data': 'goods_excel', 'list': false }" :classdiv="'inline-block ml-10'" :type="99"
				:name="'上传Excel文件'" :uptype="3" @exposeData="expose" />
			<p class=" truncate">{{ data.file_path }}</p>
			<div class="w-full text-center mt-4 text-xs">{{ $t('machine.temExcel')}}</div>
		</div>

		<div class="w-full text-center">
			<div class="inline-block">
				<el-button type="primary" size="small" @click="submit">
					<template #default>
						<span class="text-sm">{{ $t('public.save') }}</span>
					</template>
				</el-button>

				<el-button size="small" @click="cancell">
					<template #default>
						<span class="text-sm">{{ $t('public.cancel') }}</span>
					</template>
				</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import Upload from '@/components/Upload/index.vue';
import { exportData } from "@/utils/excel";
import { importgoodsExcel } from '@/api/goods';
let emit = defineEmits(['exposeData'])
let data = reactive({
	file_path: ''
})

// 下载模板
let download = () => {
	exportData('/uploads/excel/importGoods.xlsx', '商品模板', 2)
}

// 上传excel
let expose = (e) => {
	if (e.status == 200) {
		data.file_path = e.file.response.data
	} else {
		data.file_path = ''
	}
}

// 确认
let submit = () => {
	if (data.file_path == '') {
		ElMessage({
			message: $t('message.pleaseUptemplate'),
			type: 'error'
		})
	} else {
		ElMessage({
			message: $t('message.loading') + '...',
			type: 'success'
		})
		importgoodsExcel({ file_path: data.file_path }).then(res => {

			if (res.state == 200) {
				ElMessage({
					message: $t('message.loaded'),
					type: 'success'
				})
				emit('exposeData', true)
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			ElMessage({
				message: err.msg,
				type: 'error'
			})
		})
	}
}

// 取消
let cancell = () => {
	emit('exposeData', false)
}


</script>
